import { View, Text, StyleSheet, TouchableOpacity, Platform } from "react-native"
import { theme } from "../../constants/theme"

interface TabNavigationProps {
    activeTab: string
    onTabChange: (tab: string) => void
}

export function TabNavigation({ activeTab, onTabChange }: TabNavigationProps) {
    const tabs = [
        { id: "word", label: "单词" },
        { id: "natural", label: "自然拼读" },
        { id: "affix", label: "同类词缀" },
        { id: "phonetic", label: "音标联动" },
    ]

    return (
        <View style={styles.container}>
            <View style={styles.tabs}>
                {tabs.map((tab) => (
                    <TouchableOpacity
                        key={tab.id}
                        style={[styles.tab, activeTab === tab.id && styles.activeTab]}
                        onPress={() => onTabChange(tab.id)}
                    >
                        <Text style={[styles.tabText, activeTab === tab.id && styles.activeTabText]}>{tab.label}</Text>
                    </TouchableOpacity>
                ))}
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        paddingHorizontal: theme.spacing.lg,
        marginBottom: theme.spacing.md,
    },
    tabs: {
        flexDirection: "row",
        backgroundColor: "rgba(91, 142, 244, 0.1)",
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.xs,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.05)",
                shadowOffset: { width: 0, height: 1 },
                shadowOpacity: 0.5,
                shadowRadius: 2,
            },
            android: {
                elevation: 2,
            },
        }),
    },
    tab: {
        flex: 1,
        paddingVertical: theme.spacing.sm,
        alignItems: "center",
        borderRadius: theme.borderRadius.medium,
    },
    activeTab: {
        backgroundColor: theme.colors.neutral.white,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 1 },
                shadowOpacity: 0.3,
                shadowRadius: 2,
            },
            android: {
                elevation: 2,
            },
        }),
    },
    tabText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.gray,
    },
    activeTabText: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
})

